<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <!-- <link rel="icon" href=""> -->
  <title>订单</title>
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="yes" name="apple-mobile-web-app-capable"> 
    <link rel="stylesheet" href="/css/format.css">
    <link rel="stylesheet" href="/layui/layui.css">
    <link rel="stylesheet" href="/cdn/weui.min.css">
    <link rel="stylesheet" href="/cdn/jquery-weui.min.css">
    <style>
      body{
        background: #fff;
      }
      /*底部导航*/
      .footer_nav_container{
        position: fixed;
        bottom: 0; 
        left: 0;
        right: 0;
        /*border-top: 1px solid #ececec;*/
        box-shadow: 0px 0px 3px #ececec;
        background: #fff;
      }
      .footer_nav_container{
        display: flex;
        align-items: center;
      }
      .footer_nav_container li{
        flex: 1;
        padding: 10px 0;
        list-style: none;
      }
      .footer_nav_container a{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .footer_nav_container li svg{
        width: 16px;
        height: 16px;
        margin-bottom: 3px;
      }
      .footer_nav_container li span{
        font-size: 12px;
        color: #5a5a5a;
      }
      .orderList_headerTitle_container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.3rem .4rem;
        border-bottom: 1px solid #ececec;
        background: #fbfbfb;
      }
      .orderList_headerTitle_container p{
        font-size: .28rem;
        color: #777;
        font-weight: bold;
      }
      .orderList_headerTitle_container svg{
        width: .4rem;
        height: .4rem;
        cursor: pointer;
      }
      .orderList_headerSearch_container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.3rem .4rem;
        border-bottom: 1px solid #ececec;
      }
      .orderList_headerSearch_container input{
        outline: none;
        appearance: none;
        border: none;
        font-size: .28rem;
        color: #333;
        flex: 1;
        border-right: 1px solid #c7c7c7;
      }
      .orderList_headerSearch_container svg{
        width: .4rem;
        height: .4rem;
        cursor: pointer;
        margin-left: .3rem;
      }
      /*main*/
      .orderList_Main_container{

      }
      .orderList_List_container{
        border-bottom: 1px solid #ececec;
        padding-bottom: .1rem;
      }
      .orderList_List_container p{

      }
      .orderList_ListNum_container{
        padding: 0rem .4rem .1rem .4rem;
          text-align: right;
        align-items: center;
        justify-content: space-between;
      }
      .orderList_ListNum_container p{
        color: #333;
        font-size: .28rem;
      }
      .orderList_ListNum_container span{
        color: #666;
        cursor: pointer;
        font-size: .28rem;
        flex: 1;
        text-align: right;
      }
      .orderList_ListGoods_container{
        display: flex;
        align-items: center;
        padding: 0 .4rem .1rem .4rem;
      }
      .orderList_ListGoods_container img{
        width: 1rem;
        height: 1.2rem;
      }
      .orderList_ListGoods_content{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        /*height: 1.2rem;*/
        padding-left: .2rem;
        overflow: hidden;
      }
      .orderList_ListGoods_content h3{
        font-size: .28rem;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .orderList_ListGoods_content h4{
        font-size: .26rem;
        color: #828282;
      }
      .orderList_ListState_container{
        display: flex;
        align-items: center;
        padding: .2rem .4rem;
      }
      .orderList_ListState_container p{
        color: #1890ff;
        font-size: 0.28rem;
      }
      .orderList_ListState_content{
        display: flex;
        align-items: center;
        flex: 1;
        overflow: hidden;
      }
      .orderList_ListState_content span{
        color: #333;
        font-size: .28rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
      }
      .orderList_ListState_content svg{
        width: .3rem;
        height: .3rem;
        margin-right: .1rem;
        fill: #888;
      }
      .orderList_ListNoData_container p{
        text-align: center;
        padding: .2rem 0;
        font-size: .28rem;
        color: #888;
      }
      /*版权信息*/
      .public_copyright_content{
        position: relative;
        margin: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(http://weidogstest.oss-cn-beijing.aliyuncs.com/0d118b616ad13e1f874e458c8310be76.png)no-repeat center center;
      }
      .public_copyright_content p{
        background: #fff;
        font-size: 13px;
        color: #999;
        line-height: 17px;
        text-align: center;
        padding: 0 5px;
      }
     .layui-btn{
          height: 24px;
          line-height: 24px;
     }
     .orderList_ListNum_containers{
          display: flex;
     }
     
     /*底部弹窗*/
    .publicPopup_container{
      background: #fff;
    }
    .publicPopup_title_container{

    }
    .publicPopup_title_container h3{
      font-size: 15px;
      color: #111;
      padding: 12px;
      font-weight: bold;
      text-align: center;
      border-bottom: 1px solid #ececec;
    }
    .publicPopup_main_container{
      padding: 20px;
    }
    .publicPopup_main_content{

    }
    .publicPopup_mainTextarea_container{
      display: flex;
    }
    .publicPopup_mainTextarea_container textarea{
      border: 1px solid #ececec;
      background: #fafafa;
      color: #9d9d9d;
      height: 130px;
      border-radius: 4px;
      flex:1;
      padding: 15px;
      resize: none; 
      font-size: 14px;
      color: #777;
      line-height: 20px;
      box-shadow: none;
    }
    .publicPopup_mainTime_container{
      margin-top: 15px;
      border: 1px solid #ececec;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: auto;
      border-radius: 4px;
      padding: 10px 15px;
    }
    .publicPopup_mainTime_container input{
      outline: none;
      appearance: none;
      border: none;
      background: #fff;
      font-size: 14px;
      color: #777;
      flex:1;
      width: 100%;
    }
    .publicPopup_mainTime_container svg{
      fill: #999;
      width: 18px;
      height: 18px;
    }
    .publicPopup_submit_container{
      display: flex;
      padding: 15px;
      border-top: 1px solid #ececec;
    }
    .publicPopup_submit_container button{
      flex:1;
      background: #438ef7;
      color: #fff;
      text-align: center;
      padding: 12px;
      border: none;
      outline: none;
      appearance: none;
      border-radius: 4px;
      font-size: 14px;
    }
    </style>
  </head>
  <body>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <ul class="layui-tab-title">
        <li><a href="history.html?etUserId={$etUserId}&wid={$wid}&userId={$userId}&unionid={$unionid}">用户足迹</a></li>
        <li class="layui-this"><a href="#">用户订单</a></li>
      </ul>
    </div>
    <div class="orderList_header_container">
      <div class="orderList_headerTitle_container">
        <p>Ta购买的全部商品（{count($order_list['list'])}）</p>
      </div>
      <div class="orderList_headerSearch_container" style="display: none;">
        <input type="text" name="" placeholder="请输入商品名称~">
        <svg t="1608258752426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3157" width="50" height="50"><path d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0" p-id="3158" fill="#6f6f71"></path></svg>
      </div>
    </div>
    <div id="orderList_Main_container" class="orderList_Main_container">
      <!-- 列表 -->
      {if $order_list}
      {loop $order_list['list'] as $order}
      <div class="orderList_List_container">
        <div class="orderList_ListState_container">
          <div class="orderList_ListState_content">
                    <span class="copyNum" data-clipboard-text="{$order['order_no']}">订单号：{$order["order_no"]}</span>
          </div> 
          <p>
                    {if $order["status"] == -1}关闭订单{/if}
                    {if $order["status"] == 0}待支付{/if}
                    {if $order["status"] == 10}待发货{/if}
                    {if $order["status"] == 11}部分发货{/if}
                    {if $order["status"] == 20}待收货{/if}
                    {if $order["status"] == 30}已完成{/if}
               </p>
        </div>
        <div class="orderList_ListGoods_container">
          <img src="{$order['goods_info'][0]['thumb']}">
          <div class="orderList_ListGoods_content">
            <h3>{$order["goods_info"][0]["title"]}</h3>
            <h4>共1件商品，合计￥{$order["pay_price"]}</h4>
          </div>
        </div>
        <div class="orderList_ListNum_container orderList_ListNum_containers">
          <p>下单时间：</p>
          <!-- data-clipboard-text属性为订单号 点击复制用 -->
          <span>{$order["create_time"]}</span>
        </div>
        <div class="orderList_ListNum_container">
               <!-- <div class="layui-btn-container"> -->
          <!--   <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius order-fh" data-id="{$order['id']}">发货</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius open-popup order-bz" data-id="{$order['id']}" data-bz="{$order['remark']}" data-target="#addTo-do">备注</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius open-popup order-address" data-id="{$order['id']}" data-area2="{$order['area2']}" data-address="{$order['address']}" data-target="#addTo-address">修改地址</button> -->
            <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="sendChatMessage('{$order["goods_info"][0]["title"]}','{$order['goods_info'][0]['thumb']}','{$order['wxapp_url']}')">发送订单</button>
            <!-- <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button> -->
          <!-- </div> -->
        </div>
      </div>
      {/loop}
      {/if}

    </div>
    <!-- 版权 -->
    <div class="public_copyright_container">
      <div class="public_copyright_content">
        <p>{$copyright}</p>
      </div>
    </div>
    <div class="footer_nav_container">
      <ul class="footer_nav_container">
        <li>
          <a href="#">
            <i class="layui-icon layui-icon-list"></i>   
            <span style="color: #3787f6;">记录</span>
          </a>
        </li>
        <li>
          <a href="coupon.html?wid={$wid}&etUserId={$etUserId}&userId={$userId}&unionid={$unionid}">
            <i class="layui-icon layui-icon-star-fill"></i>
            <span>优惠券</span>
          </a>
        </li>
        <li>
          <a href="shop_list.html?wid={$wid}&etUserId={$etUserId}&userId={$userId}&unionid={$unionid}">
            <i class="layui-icon layui-icon-cart-simple"></i>
            <span>购物车</span>
          </a>
        </li>
      </ul>
    </div>
    <div id="addTo-do" class="weui-popup__container popup-bottom">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="publicPopup_container">
          <div class="publicPopup_title_container">
            <h3>修改备注</h3>
          </div>
          <div class="publicPopup_main_container">
            <div class="publicPopup_main_content">
              <div class="publicPopup_mainTime_container">
                <input type="text" id='order_bz'  name="order_bz" placeholder="请填写备注" />
                <input type="hidden" id='order_id'  name="order_id" />
              </div>
            </div>
          </div>
          <div class="publicPopup_submit_container">
            <button id="saveAddTo-do">保存</button>
          </div>
        </div>
      </div>
    </div>
    <div id="addTo-address" class="weui-popup__container popup-bottom">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="publicPopup_container">
          <div class="publicPopup_title_container">
            <h3>修改地址</h3>
          </div>
          <div class="publicPopup_main_container">
            <div class="publicPopup_main_content">
              <!--<div class="publicPopup_mainTime_container">-->
                <!--<div class="layui-form-item" style="margin-left: -20px;">-->
                <div class="layui-form-item">
                  <label class="layui-form-label">省</label>
                  <div class="layui-input-inline">
                     <input type="text" id='provinces'  name="provinces" placeholder="请填写详细地址" class="layui-input" />
                  </div>
                   <label class="layui-form-label">市</label>
                   <div class="layui-input-inline">
                     <input type="text" id='citys'  name="citys" placeholder="请填写详细地址" class="layui-input" />
                  </div>
                   <label class="layui-form-label">区/县</label>
                   <div class="layui-input-inline">
                     <input type="text" id='area'  name="area" placeholder="请填写详细地址" class="layui-input" />
                  </div>
                  <!--<div class="layui-input-inline" style="margin-left: -20px;">-->
                  <!--  <select id="provinces" name="provinces" lay-filter="provinces" style="width:100px;">-->
                  <!--    <option value="">请选择省</option>-->
                  <!--  </select>-->
                  <!--</div>-->
                  <!--<div class="layui-input-inline">-->
                  <!--  <select id="citys" name="citys" lay-filter="citys">-->
                  <!--    <option value="">请选择市</option>-->
                  <!--  </select>-->
                  <!--</div>-->
                  <!--<div class="layui-input-inline">-->
                  <!--  <select id="countys" name="area" lay-filter="countys">-->
                  <!--    <option value="">请选择区/县</option>-->
                  <!--  </select>-->
                  <!--</div>-->
                </div>
                <!--</div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">详细地址</label>
                    <div class="layui-input-inline">
                        <input type="text" id='address'  name="address" placeholder="请填写详细地址" class="layui-input" />
                    </div>
                </div>
                
                <input type="hidden" id='order_ida'  name="order_ida" />
              <!--</div>-->
            </div>
          </div>
          <div class="publicPopup_submit_container">
            <button id="saveAddTo-address">保存</button>
          </div>
        </div>
      </div>
    </div>
    <script src="/cdn/jquery.min.js"></script>
    <script src="/cdn/clipboard.js"></script>
    <script src="/cdn/jquery-weui.min.js"></script>
    <script src="/js/ajax.js"></script>
    <script src="/layui/layui.js"></script>
    <!-- 复制粘贴 -->
    <script>
      var clipboard = new ClipboardJS('.copyNum');

      clipboard.on('success', function(e) {
        alert('复制订单号成功');
        console.info(e.text);
      });

      clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
      });
    </script>
    
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
        wx.config({
          beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "{$wxConfig['appId']}", // 必填，企业微信的corpID
          timestamp: "{$wxConfig['timestamp']}", // 必填，生成签名的时间戳
          nonceStr: "{$wxConfig['nonceStr']}", // 必填，生成签名的随机串
          signature: "{$wxConfig['signature']}",// 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: ['sendChatMessage'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        });
        wx.ready(function(){
          console.log('config success');
          wx.agentConfig({
            corpid: "{$corp_id}", // 必填，企业微信的corpid，必须与当前登录的企业一致
            agentid: "{$agent_id}", // 必填，企业微信的应用id （e.g. 1000247）
            timestamp: "{$agentConfig['timestamp']}", // 必填，生成签名的时间戳
            nonceStr: "{$agentConfig['nonceStr']}", // 必填，生成签名的随机串
            signature: "{$agentConfig['signature']}",// 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['selectExternalContact','sendChatMessage'], //必填
            success: function(res) {
              console.log('agentConfig success');
              wx.checkJsApi({
                jsApiList: ['sendChatMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                  
                }
              });
            },
            fail: function(res) {
              if(res.errMsg.indexOf('function not exist') > -1){
                console.log('版本过低请升级')
              }
            }
          });
        });
        wx.error(function(res){
          console.log('error'+res);
        });

        function sendChatMessage(title,imgUrl,url){
               wx.invoke('sendChatMessage', {
               msgtype:"miniprogram",
               miniprogram: {
                    appid: "{$set->appid}",
                    title: title,
                    imgUrl: imgUrl,
                    page: url,
               }
               }, function(res) {
                    if (res.err_msg == 'sendChatMessage:ok') {
                    //发送成功
                    }
               })
        }        
    </script>
    <script type="text/javascript">
        var page=2;
        var is_more = true;
        $(window).scroll(function(){
           var wid={$wid};
           var unionid="{$unionid}";
           var scrollTop=$(this).scrollTop();
           var scrollHeight=$(document).height();
           var windowHeight=$(this).height();
           if(is_more&&scrollTop+windowHeight==scrollHeight){
            page = loadmore(wid,unionid,page);
           }
        })

        function loadmore(wid,unionid,page){
          url = 'get_next_order_list.html?wid='+wid+'&unionid='+unionid+'&page='+page;
          $.ajax({
            type: "get",
            url: url,
            data: {},
            dataType: "json",
            success: function (data) {
                page = data.page + 1
                if(data.error==0){
                  //遍历json数据，组装下拉选框添加到html中
                  if(data.list.length>0){
                    $.each(data.list, function (i, item) {
                        let html="";
                        html += '<div class="orderList_List_container">';
                        html += '<div class="orderList_ListState_container">';
                        html += '<div class="orderList_ListState_content">';
                        html += '<span class="copyNum" data-clipboard-text="'+item.order_no+'">订单号：'+item.order_no+'</span>';
                        html +=  '</div><p>';
                        if(item.status==-1) html += '关闭订单';
                        if(item.status==0) html += '待支付';
                        if(item.status==10) html += '待发货';
                        if(item.status==11) html += '部分发货';
                        if(item.status==20) html += '待收货';
                        if(item.status==30) html += '已完成';
                        html += '</p></div>';
                        html += '<div class="orderList_ListGoods_container">;'
                        html +=   '<img src="'+item.goods_info[0].thumb+'">';
                        html +=   '<div class="orderList_ListGoods_content">';
                        html +=     '<h3>'+item.goods_info[0].title+'</h3>';
                        html +=     '<h4>共1件商品，合计￥'+item.pay_price+'</h4>';
                        html +=    '</div>';
                        html += '</div>';
                        html += '<div class="orderList_ListNum_container orderList_ListNum_containers">';
                        html +=   '<p>下单时间：</p>';
                        html +=   '<span>'+item.create_time+'</span>';
                        html += '</div>';
                        html += '<div class="orderList_ListNum_container">';
                        html +=    '<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="sendChatMessage(\''+item.goods_info[0].title+'\',\''+item.goods_info[0].thumb+'\',\''+item.wxapp_url+'\')">发送订单</button>';
                        html +=  '</div>';
                        html += '</div>';
                        $("#orderList_Main_container").append(html);
                    
                    });

                  }else{
                    is_more = false
                    if($(".orderList_ListNoData_container").length == 0){
                      let html = "";
                       html +=  '<div class="orderList_ListNoData_container">';
                       html +=    '<p>没有更多了~</p>';
                       html +=  '</div>';
                       $("#orderList_Main_container").append(html);
                    }
                  }
                }else{
                  console.log(1111)
                }
            }
          });
        }
    </script>
    <script type="text/javascript">
        $('.order-address').click(function(){
             let area2 = $(this).data('area2')
             let area2_arr = area2.split(",");
             if(area2){
                 $("#provinces").val(area2_arr[0]);
                 $("#citys").val(area2_arr[1]);
                 $("#area").val(area2_arr[2]);
             }else{
                 $("#provinces").val('');
                 $("#citys").val('');
                 $("#area").val('');
             }
    

             let address = $(this).data('address')
             $("#address").val(address);
             let id = $(this).data('id')
             $("#order_ida").val(id);
        });
      $('#saveAddTo-address').click(function(){
        let provinces = $("#provinces").val();
        if(!provinces){
          $.toast("省",'cancel');
          return;
        }
        let citys = $("#citys").val();
        if(!citys){
          $.toast("市",'cancel');
          return;
        }
        let area = $("#area").val();
        if(!area){
          $.toast("区/县",'cancel');
          return;
        }
        let address = $("#address").val();
        let id=$("#order_ida").val();
        if(!id){
          $.toast("参数错误",'cancel');
          return;
        }
        myAjaxPost(false, true, 'update_order.html', !{type:3,id:id,provinces:provinces,citys:citys,area:area,address:address}, function (resp) {
          if(resp.status == 'success'){
            $.toast(resp.msg);
            setTimeout(function(){
                      location.reload();
                  },100);
          }else{
            $.toast(resp.msg,'cancel');
          }
        })
        // $.closePopup();
      });
        
        
      $('.order-fh').click(function(){
         let id = $(this).data('id')
         console.log(id)
         if(!id){
          $.toast("参数错误",'cancel');
          return;
        }
        myAjaxPost(false, true, 'update_order.html', !{type:1,id:id}, function (resp) {
          if(resp.status == 'success'){
            $.toast(resp.msg);
            setTimeout(function(){
                      location.reload();
                  },100);
          }else{
            $.toast(resp.msg,'cancel');
          }
        })
      });
      $('.order-bz').click(function(){
         let bz = $(this).data('bz')
         console.log(bz)
         $("#order_bz").val(bz);
         let id = $(this).data('id')
         $("#order_id").val(id);
      });
      $('#saveAddTo-do').click(function(){
        let order_bz = $("#order_bz").val();
        if(!order_bz){
          $.toast("备注",'cancel');
          return;
        }
        let id=$("#order_id").val();
        if(!id){
          $.toast("参数错误",'cancel');
          return;
        }
        myAjaxPost(false, true, 'update_order.html', !{type:2,id:id,order_bz:order_bz}, function (resp) {
          if(resp.status == 'success'){
            $.toast(resp.msg);
            setTimeout(function(){
                      location.reload();
                  },100);
          }else{
            $.toast(resp.msg,'cancel');
          }
        })
        // $.closePopup();
      });
    </script>
  </body>
</html>
